<template>
    <div class="search">
        <input type="text" :placeholder="placeholder" :maxlength="maxlength" v-model="keyword" @input="search()">
    </div>
</template>

<script>
import { ref,watch } from 'vue';
import getData from '@/services';
import { useStore } from 'vuex';
import { formatUserDate } from '@/libs/utils';

export default {
    // 接收父组件传递的数据
    props: {
        // 搜索框的占位符-提示文本
        placeholder: {
            type: String,
            default: ''
        },
        // 搜索框的最大输入长度
        maxlength: {
            type: Number,
            default: 8
        }
    },
    setup(props) {
        const keyword = ref('');

        // 获取vuex的store
        const store = useStore();

        // 搜索框输入事件
        const search = () => {
            // 拿到field字段
            const field = store.state.field;
            // 判断当前输入的内容长度是否等于maxlength
            if (keyword.value.length === props.maxlength) {
                // 调用getData函数
                getData(store, field, formatUserDate(keyword.value));
            }
        }

        // 监听field字段的变化 变化后清空输入框
        // 第一个参数是要监听的字段  第二个参数是回调函数  回调函数会在字段变化时触发  回调函数会接收两个参数  第一个参数是新值  第二个参数是旧值
        watch(
            () => store.state.field,
            () => {
                keyword.value = '';
            }
        )

        return {
            keyword,
            search
        }
    }
}
</script>

<style lang="less" scoped>
    .search {
        // 固定定位
        position: fixed;
        top: 0.44rem;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 0.38rem;
        // 设置内边距
        padding: 0.03rem 0.1rem;
        // 设置边框不改变大小
        box-sizing: border-box;
        background-color: #ffffff;
        input {
            width: 100%;
            height: 100%;
            font-size: 0.14rem;
            border: 1px solid #ccc;
            // 文字缩进
            padding-left: 0.1rem;
            // 圆角边框
            border-radius: 0.06rem;
            // 聚焦样式
            &:focus {
                border: 1px solid #ff6600;
                // 阴影
                box-shadow: 0 0 0.02rem #ff6600;
                // 过渡动画
                transition: all 0.3s;
            }
        }
    }
</style>